<template>
  <div class="book-detail" v-if="book">
    <div class="book-cover">
      <img :src="book.coverUrl" :alt="book.title + ' 封面'" />
    </div>
    <div class="book-info">
      <h2>{{ book.title }}</h2>
      <p>作者：{{ book.author }}</p>
      <p>ISBN：{{ book.isbn }}</p>
      <p>状态：{{ book.status }}</p>
      <p>评分：{{ book.rating }} / 5</p>
      <div class="rating">
        <span v-for="i in 5" :key="i" @click="rateBook(i)" :class="{ active: i <= book.rating }">★</span>
      </div>
      <button @click="borrowBook" v-if="book.status === '可借'">借阅</button>
      <button @click="returnBook" v-if="book.status === '已借出'">归还</button>
      <button @click="downloadBook" v-if="book.fileUrl">下载</button>
    </div>
    <div class="book-reviews">
      <h3>书评</h3>
      <ul>
        <li v-for="review in book.reviews" :key="review.id">
          <p>{{ review.content }}</p>
          <p class="review-info">by {{ review.user }} on {{ formatDate(review.date) }}</p>
        </li>
      </ul>
      <div class="add-review">
        <textarea v-model="newReview" placeholder="写下你的书评..."></textarea>
        <button @click="submitReview">提交书评</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookDetail',
  data() {
    return {
      book: null,
      newReview: ''
    }
  },
  methods: {
    async fetchBook() {
      this.book = await this.$store.dispatch('fetchBook', this.$route.params.id)
    },
    async borrowBook() {
      try {
        this.book = await this.$store.dispatch('borrowBook', this.book.id)
      } catch (error) {
        console.error('Error borrowing book:', error)
      }
    },
    async returnBook() {
      try {
        this.book = await this.$store.dispatch('returnBook', this.book.id)
      } catch (error) {
        console.error('Error returning book:', error)
      }
    },
    async downloadBook() {
      try {
        const response = await this.$store.dispatch('downloadBook', this.book.id)
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `${this.book.title}.pdf`)
        document.body.appendChild(link)
        link.click()
      } catch (error) {
        console.error('Error downloading book:', error)
      }
    },
    async rateBook(rating) {
      try {
        this.book = await this.$store.dispatch('rateBook', { id: this.book.id, rating })
      } catch (error) {
        console.error('Error rating book:', error)
      }
    },
    async submitReview() {
      if (this.newReview.trim()) {
        try {
          await this.$store.dispatch('addReview', { id: this.book.id, content: this.newReview })
          this.newReview = ''
          await this.fetchBook() // 重新获取书籍信息以更新评论列表
        } catch (error) {
          console.error('Error submitting review:', error)
        }
      }
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString()
    }
  },
  created() {
    this.fetchBook()
  }
}
</script>

<style scoped>
.book-detail {
  display: flex;
  flex-wrap: wrap;
}
.book-cover {
  flex: 1;
  max-width: 300px;
  margin-right: 20px;
}
.book-cover img {
  width: 100%;
  height: auto;
}
.book-info {
  flex: 2;
}
.book-reviews {
  flex-basis: 100%;
  margin-top: 20px;
}
.rating span {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
}
.rating span.active {
  color: #ffd700;
}
.add-review textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}
.review-info {
  font-size: 0.8em;
  color: #666;
}
</style>